<template>
  <q-dialog v-model="open" transition-show="rotate" transition-hide="rotate">
    <q-card class="box">
      <q-card-section class="row items-center q-mt-md">
        <q-space />
        <q-btn icon="clear" flat round dense v-close-popup :style="{ color: '#fff' }" />
      </q-card-section>




      \
      <div class="proInfo">
        <ag-grid
          :column-defs="columnDefs"
          :gridOptions="gridOptions"
          :id="tableId"
          :row-data="orderData"
          :style="{ height: '450px' }"
          @grid-ready="setGridApi"
          :dense="true"
          @first-data-rendered="gridApi?.sizeColumnsToFit()"
          :components="{ buttonRenderer: 'ConfirmButton' }"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import { useQuasar } from 'quasar';

import { useGridApi } from 'src/boot/grid';
import { useEmitter } from 'src/emitter';
import AgGrid from 'src/components/ag-grid/index.vue';
import { createColumnDefs, createGridOptions } from './utils';
import { Row } from './model';
import ConfirmButton from './confirm-button.vue';
import { api } from 'src/boot/api';

export default defineComponent({
  name: 'yard-plan-detail-mat',

  props: {
    orderData: {
      type: Array as PropType<any[]>,
      required: true,
    },
    craneNo: {
      type: String,
      required: true,
    },
  },

  components: {
    AgGrid,
    //eslint-disable-next-line vue/no-unused-components
    ConfirmButton,
  },

  setup(props) {
    const $q = useQuasar();
    const open = ref(false);
    const [gridApi, setGridApi] = useGridApi<Row>();

    const tableId = 'plan-detail-filter';

    useEmitter('inform', async payload => {
      if (payload.name !== 'terminal-production-plan' && payload.name !== 'production-table-confirm') {
        return;
      }
      if (payload.name === 'terminal-production-plan') {
        open.value = payload.value;
      } else {
        api
          .get(
            `/ManalController/CraneOrderOperate?craneNo=${props.craneNo}&orderNo=${payload.value.orderNo}&operType=${payload.value.operType}&currentPos=${payload.value.frPos}`,
          )
          .then(() => {
            $q.notify({ message: '操作成功', timeout: 3000 });
          });
      }
    });

    return {
      open,
      gridApi,
      setGridApi,
      columnDefs: createColumnDefs(),
      gridOptions: createGridOptions(),
      tableId,
    };
  },
});
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 1024px;
  min-width: 1024px;
  height: 600px;
  background-color: transparent;
  background-image: url(src/assets/terminal/pro_plan_bg.png);
  background-size: 100% 100%;
  font-size: 20px !important; // 增大对话框内文字的基础字体大小，使用 !important
  font-weight: bold !important;

  * {
    font-size: 20px !important; // 选择所有元素，强制应用字体大小
    font-weight: bold !important;
  }

  .proInfo {
    position: absolute;
    width: 950px;
    height: 450px;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: lightslategray;
    font-size: 20px !important; // 增大表格区域内文字的基础字体大小，使用 !important
    font-weight: bold !important;

    * {
      font-size: 20px !important; // 强制应用字体大小到所有内部元素
      font-weight: bold !important;
    }
  }

  .q-card {
    font-size: 20px !important; // 增大 q-card 内文字的基础字体大小，使用 !important
    font-weight: bold !important;
  }

  .q-card-section {
    font-size: 20px !important; // 增大 q-card-section 内文字的基础字体大小，使用 !important
    font-weight: bold !important;
  }

  .q-btn {
    font-size: 20px !important; // 增大按钮文字的基础字体大小，使用 !important
    font-weight: bold !important;
  }
  .ag-theme-alpine {
    font-size: 20px !important; // 确保 Ag-Grid 内的文字大小
    font-weight: bold !important;
  }

  .ag-cell {
    font-size: 22px !important; // 确保表格单元格文字大小
    font-weight: bold !important;
    min-width: 150px !important;
  }

  .ag-header-cell-label {
    font-size: 20px !important; // 确保表格头部文字大小
    font-weight: bold !important;
    // min-width: 150px !important; // 设置列头的最小宽度
  }
}
</style>
